<template>
    <div>
        <div style="display:flex;justify-content:space-between;height:62px;background-color:#545c64">
            <div style="width:60%;line-height:62px;
                        color:#fff;margin-left:5px;font-weight:500">
                <span style="font-size:20px">后台管理系统</span>
            </div>
            <div style="width:20%;margin:0 100px;display:flex;justify-content:space-between;">
                    <div class="block" style="margin:10px;">
                        <el-avatar :size="40" :src="$store.state.img"></el-avatar>
                        <el-link style="color:white;" :underline="false">
                            {{$store.state.condition}}
                        </el-link>
                    </div>
                    <div>
                        <el-link @click="back()" style="color:white;line-height:62px" :underline="false">
                            退出
                        </el-link>
                    </div>
            </div>
        </div>
        <div style="height:5px;"></div>
        <div style="display:flex;">
            <div style="width:16%;height:45vw;margin:0 20px">
                <el-menu :router="true" unique-opened style="height:100%">
                    <el-menu-item v-for="(item, index) in elmenu" :key="index"
                        :index="item.router">
                        <i :class="item.stylei"></i>
                        <span>{{item.name}}</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <div style="width:1%;"></div>
            <div style="width:80%;height:120vh;">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'Adm',
        props:[],
        data() {
            return {
                elmenu:[
                    {name:"类型管理92",router:"/adm/type/type",stylei:"el-icon-wallet"},
                    {name:"类型管理93",router:"/adm/type/type93",stylei:"el-icon-wallet"},
                    {name:"商品管理",router:"/adm/book/book",stylei:"el-icon-reading"},
                    {name:"热度管理",router:"/adm/hot/hot",stylei:"el-icon-picture-outline"},
                    {name:"订单发货",router:"/adm/order/shipments",stylei:"el-icon-shopping-cart-full"},
                    {name:"用户列表",router:"/adm/user/userList",stylei:"el-icon-user"},
                    {name:"管理员添加",router:"/adm/user/addUser",stylei:"el-icon-user-solid"}
                ]
            }
        },
        methods:{
            back(){
                this.$router.push({path:"/"})
                this.$store.commit('$_removeStorage');
                if(!this.$store.state.isLogin){
                    this.$message({
                        message: '已退出',
                        type: 'success'
                    });
                    return;
                }
            }
        },
        mounted(){

        }
    }
</script>
<style scoped="scoped">
    *{
        padding: 0 ;
    }
    a{ 
        text-decoration:none;
    }
</style>
